<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>阻止事件传播</title>
        <style>
            .outer,
            .middle,
            .inner { 
                border: 1px solid blue; 
                margin: 50px;
            }

            .outer { height: 300px; width: 300px; }
            .middle { height: 198px; width: 198px; border-color: green; }
            .inner { height: 98px; width: 98px; border-color: red; }
        </style>
    </head>
    <body>
        <h1>阻止事件传播</h1>
        <div class="outer">
            <div class="middle">
                <div class="inner"></div>
            </div>
        </div>
        <button class="stop">阻止`.outer`元素上的点击事件的传播行为</button>
        <p>请在浏览器终端中查看运行结果</p>
        <script>
            (()=>{
                const outer = document.querySelector('.outer');
                const middle = document.querySelector('.middle');
                const inner = document.querySelector('.inner');

                const type = 'click';

                const listener = function(event){
                    console.log( 'target: ', event.target );
                    console.log( 'current target: ', event.currentTarget );
                    console.log( 'event phase', event.eventPhase );
                    if( event.currentTarget === middle && event.eventPhase === event.BUBBLING_PHASE) {
                        event.stopPropagation();
                    }
                }

                // true 表示事件捕获阶段调用事件监听器
                // false 表示事件冒泡阶段调用事件监听器
                const capture = true;

                outer.addEventListener(type,listener,capture);
                outer.addEventListener(type,listener,!capture);

                middle.addEventListener(type,listener,capture);
                middle.addEventListener(type,listener,!capture);

                inner.addEventListener(type,listener,capture);
                inner.addEventListener(type,listener,!capture);

                // = = = = = = = = = = = = = = = = = = = =

                const stopButton = document.querySelector('.stop');
                stopButton.addEventListener('click', evt => {

                    outer.addEventListener('click', evt => {
                        evt.stopImmediatePropagation();
                    }, true );

                }, false);

            })();
        </script>
    </body>
</html>